<template>
  <div class="layout">
    <div v-if="searcherType == 0">
      <el-form :inline="true" :model="query" class="form">
        <el-form-item label="产品或原材料名称">
          <el-input
            v-model="query.product_name"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item label="外部款式或型号">
          <el-input
            v-model="query.brand_or_style"
            placeholder="请输入商品款式"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input
            v-model="query.supplierName"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">检索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="searcherType == 1">
      <el-form :inline="true" :model="supplierQuery" class="form">
        <el-form-item label="供应商名称">
          <el-input
            v-model="supplierQuery.supplierName"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item label="供应商法人代表">
          <el-input
            v-model="supplierQuery.legalPerson"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item label="我司指定对接人">
          <el-input
            v-model="supplierQuery.authorizer"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">检索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="searcherType == 2">
      <el-form :inline="true" :model="costQuery" class="form">
        <el-form-item label="供应商名称">
          <el-input
            v-model="costQuery.supplierName"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item label="产品或原材料名称">
          <el-input
            v-model="costQuery.product_name"
            placeholder="请输入名称"
            @keyup.enter="onSubmit"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">检索</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  reactive,
  toRefs,
  ref,
  PropType,
} from "vue";
export default defineComponent({
  name: "Searcher",
  props: {
    query: {
      type: Object as PropType<{ product_name: string; supplierName: string; brand_or_style: string }>,
    },
    supplierQuery: {
      type: Object as PropType<{ legalPerson: string; supplierName: string; authorizer: string }>,
    },
    costQuery: {
      type: Object as PropType<{ product_name: string; supplierName: string }>,
    },
    searcherType: {
      type: Number,
    },
    getList: Function,
  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
      formQuery: null,
      form: {
        productName: null,
        productPat: null,
      },
    });
    const onSubmit = () => {
      emit("update:query", props.query);
      emit("getList");
    };
    onBeforeMount(() => {
      console.log("props.searcherType",props.searcherType)
    });
    return {
      ...toRefs(state),
      onSubmit,
    };
  },
});
</script>
<style scoped>
.layout {
  width: auto;
  height: auto;
  display: flex;
}
.layout .form {
  margin: auto 0 auto 20px;
}
</style>
  